<template>
  <BasicModal
    :title="getTitle"
    :width="600"
    :canFullscreen="false"
    :centered="true"
    :destroyOnClose="true"
    @register="registerModal"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" :model="formModel"/>
  </BasicModal>
</template>

<script lang="ts" name="BankModal" setup>
import { ref, computed, unref, reactive } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { BasicForm, useForm } from "/@/components/Form/index";
import { useMessage } from "/@/hooks/web/useMessage";
import { modify } from "/@/views/shop/orders/orders.api";

const $message = useMessage();

// 声明Emits
const emit = defineEmits(['success', 'register']);
//表单modal
const formModel = reactive<Recordable>({});

//表单配置
const [registerForm, {resetFields, setFieldsValue, updateSchema, validate}] = useForm({
  schemas: [
    { label: "", field: "id", component: "Input", show: false },
    { label: "", field: "orderSn", component: "Input", show: false },
    { label: "成人价", field: "goodsPrice", component: "Input", required: true, componentProps: { autoComplete: "off" } },
    { label: "成人数", field: "num", component: "Input", required: true, componentProps: { autoComplete: "off" } },
    { label: "儿童价", field: "childPrice", component: 'Input', componentProps: { autoComplete: "off" } },
    { label: "儿童数", field: "childNum", component: "Input", componentProps: { autoComplete: "off" } },
    { label: "会员返", field: "priceVip", component: "Input", componentProps: { autoComplete: "off" } },
    { label: "同行返", field: "priceRoom", component: "Input", componentProps: { autoComplete: "off" } },
    { label: "增项金", field: "addPrice", component: "Input", componentProps: { autoComplete: "off" } },
    { label: "说明", field: "addMark", component: "Input", componentProps: { autoComplete: "off" } },
    { label: "减项金", field: "subPrice", component: "Input", componentProps: { autoComplete: "off" } },
    { label: "说明", field: "subMark", component: "Input", componentProps: { autoComplete: "off" } },
    { label: "备注", field: "remark", component: "InputTextArea", componentProps: { autoComplete: "off" }, colProps: { span: 24 }, },
  ],
  labelWidth: 90,
  baseColProps: {span: 11},
  showActionButtonGroup: false,
});

const formEl = ref();
const isUpdate = ref(true);
//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  setModalProps({confirmLoading: false});
  await resetFields();
  Object.assign( formModel, {
    id: data.id,
    orderSn: data.orderSn,
    goodsPrice: data.goodsPrice,
    num: data.num,
    childPrice: data.childPrice,
    childNum: data.childNum,
    priceVip: data.priceVip,
    priceRoom: data.priceRoom,
    addPrice: data.addPrice || 0.00,
    addMark: data.addMark || '',
    subPrice: data.subPrice || 0.00,
    subMark: data.subMark || '',
    remark: data.remark || '',
  } )
  await setFieldsValue(formModel)
});

//标题
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

//表单提交事件
async function handleSubmit() {
  try {
    setModalProps({confirmLoading: true});
    const values = await validate();
    // console.info("handleSubmit@@", values);
    await modify(values.orderSn, values).then((res) => {
      console.info("handleSubmit@@", res);
      if (res.success) {
        $message.createMessage.success("操作成功！");
        //关闭弹窗
        closeModal();
        emit("success")
      } else {
        $message.createMessage.warning(res.message);
      }
    });
  } catch (e) {
    console.log(e);
  } finally {
    setModalProps({confirmLoading: false});
  }
}

</script>

<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select-picture-card) {
  width: 360px!important
}
</style>
